import VueRouter from 'vue-router'
import About from '../pages/About.vue'
import Home from '../pages/Home.vue'
import News from '../pages/News.vue'
import Message from '../pages/Message.vue'
import Detail from '../pages/Detail.vue'

export default new VueRouter({
    routes:[
        {
            name:'myAbout',
            path:'/about',
            component:About
        },
        {
            path:'/home',
            component:Home,
            children:[
                {
                    path:'news',
                    component:News
                },
                {
                    path:'message',
                    component:Message,
                    children:[
                        {
                            name:'myDetail',
                            path:'detail',
                            component:Detail,
                            // props的第一种写法：对象，该对象中所有key-value都会以props形式传给detail组件
                            // props:{a:1,b:'hello'}

                            // props第二种写法：布尔，若布尔值为真，会把该路由组件收到的所有params参数，以props的形式传给Detail组件
                            // props:true

                            // props第三种写法：函数
                            // props(){
                            //     return {
                            //         id:'666',
                            //         title:'sss'
                            //     }
                            // }
                            // 
                            // props($route){
                            //     return {id:$route.query.id,title:$route.query.title}
                            // }
                            // 简写一
                            props({query}){
                                return {id:query.id,title:query.title}
                            }
                            // 简写二
                            // props({query:{id,title}}){
                            //     return {id,title}
                            // }
                        }
                    ]
                },
            ]
        },
    ]
})